<template>
  <div class="layout">
    <!-- 上半部分菜单栏 -->
    <div class="menu">
      <!-- 在这里放置你的菜单内容 -->
      test
    </div>

    <!-- 下半部分路由内容区域 -->
    <div class="router66">
      <!-- 在这里放置你的路由内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlexText"
}
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  height: 100vh; /* 让布局占满整个视窗高度 */
}

.menu {
  flex: 0 0 6%; /* 上半部分菜单栏固定高度为6% */
  background-color: #f0f0f0; /* 设置菜单栏的背景色 */
  overflow: auto; /* 如果菜单内容超出高度，显示滚动条 */
}

.router66 {
  flex: 1; /* 下半部分路由内容区域会占满剩余空间 */
}
</style>